<template>
  <div class="echarts-container" ref="charts"></div>
  <div class="echarts-container2" ref="charts2"></div>
  <div class="bottom">
    <h1>燃油信息</h1>
  </div>
</template>

<script setup lang="ts">
//@ts-ignore
import * as echarts from 'echarts';
//@ts-ignore
import {onMounted, ref} from "vue";
//获取图形的DOM节点
let charts = ref();
let charts2 = ref();

let xData = ['FQtyL', 'FQtyR'];
let yData = [3200, 3200];//燃油总量
let barData = [1600, 1500];//燃油剩余
let data1 = 62;//燃油流量

let option = {
  // backgroundColor: '#062544',
  grid: {
    top: '10%',
    left: '-5%',
    bottom: '5%',
    right: '5%',
    containLabel: true,
  },

  tooltip: {
    trigger: 'item',
  },
  animation: true,
  xAxis: [
    {
      type: 'category',
      data: xData,
      axisTick: {
        alignWithLabel: true,
      },
      axisLine: {
        show: false,
      },
      axisLabel: {
        textStyle: {
          color: '#ffffff',
          fontSize: 25
        },
        margin: 30,
      },
      interval: 1,
    },
  ],
  yAxis: [
    {
      show: false,
      type: 'value',
    },
  ],
  series: [
    {
      name: '上部圆',
      type: 'pictorialBar',
      silent: true,
      symbolSize: [80, 20],
      symbolOffset: [0, -10],
      symbolPosition: 'end',
      z: 12,
      label: {
        normal: {
          show: true,
          position: 'top',
          fontSize: 18, //
          offset: [0, 5],
          fontWeight: 'bold',
          color: '#fff', // 改为白色字体
        },
      },
      color: '#5BFCF4',
      data: yData,
    },
    {
      name: '底部圆',
      type: 'pictorialBar',
      silent: true,
      symbolSize: [80, 20],
      symbolOffset: [0, 7],
      z: 12,
      color: '#5BFCF4',
      data: yData,
    },
    {
      name: '燃油总量',
      type: 'bar',
      barWidth: '80',
      barGap: '10%', // Make series be overlap
      barCateGoryGap: '10%',
      itemStyle: {
        normal: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 0.7, [
            {
              offset: 0,
              color: 'rgba(210,210,210,0.3)',
            },
            {
              offset: 1,
              color: '#5BFCF4',
            },
          ]),
          opacity: 0.8,
        },
      },
      data: yData,
    },//图1
    {
      name: '剩余燃油',
      type: 'bar',
      barWidth: 80,
      z: 12,
      barGap: '-100%',
      itemStyle: {
        //lenged文本
        opacity: 0.7,
        color: () => {
          return new echarts.graphic.LinearGradient(
              0,
              0,
              0,
              1,
              [
                {
                  offset: 0,
                  color: '#EB3B5A', // 0% 处的颜色
                },
                {
                  offset: 1,
                  color: '#FE9C5A', // 100% 处的颜色
                },
              ],
              false
          );
        },
      },
      label: { // 添加标签配置
        show: true,
        position: 'insideTop', //
        offset: [0, -8],
        formatter: (params: any) => {
          const index = params.dataIndex; // 获取当前数据索引
          const remainingPercentage = (barData[index] / yData[index]) * 100; // 计算百分比
          return `${remainingPercentage.toFixed(0)}%`;
        },
        color: '#fff', // 文字颜色
        fontSize: 15,
        fontWeight: 900
      },

      data: barData,
    },//图2
    {
      name: '上部圆',
      type: 'pictorialBar',
      silent: true,
      symbolSize: [80, 20],
      symbolOffset: [0, -6],
      symbolPosition: 'end',
      z: 12,
      color: '#EB3B5A',
      data: barData,
    },
    {
      name: '底部圆',
      type: 'pictorialBar',
      silent: true,
      symbolSize: [80, 20],
      symbolOffset: [0, 7],
      z: 12,
      color: '#FE9C5A',
      data: barData,
    },
  ],
};

let option2 = {
  tooltip: {
    trigger: 'item', // 触发方式为数据项图形触发
    formatter: (params: any) => {
      // 格式化提示框内容
      return `燃油流量: ${params.data} gph`;
    },
  },
  yAxis: {
    type: 'category',
    axisLine: {
      show: false,
    },
    axisTick: {
      show: false,
    },
    axisLabel: {
      show: false,
    },
  },
  xAxis: {
    show: false,
    max: 100,
  },
  grid: {
    top: '40',
    right: '15%',
    left: '15%',
    bottom: '80', //图表尺寸大小
  },
  title: {
    text: `燃油流量: ${data1} gph `,
    left: 'center',
    top: '2%', // 根据需要调整标题与顶部的距离
    textStyle: {
      fontSize: 15, // 根据需要调整字体大小
      fontWeight: 'bold', // 可选，设置字体加粗等样式
    },
  },
  animationDuration: 3000,
  series: [
    {
      type: 'bar',
      barWidth: 20,
      z: 1,
      showBackground: true,
      backgroundStyle: {
        color: 'rgba(203,210,210,0.59)',
        borderRadius: [30, 30, 30, 30], //圆角大小
      },
      label: {
        show: true,
        position: 'insideTopRight', //每一条的数据位置
        padding: [12, -16, 0, 0],
        formatter: () => {
          return '▲';
        },
        color: 'rgba(254, 173, 84, 1)',
        fontSize: 28,
      },
      itemStyle: {
        normal: {
          color: (params: any) => {
            let color1 = {};
            if (params.value > 5) {
              color1 = {
                type: 'linear',
                x: 1,
                x2: 0,
                y: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 1,
                    color: 'rgba(48, 201, 137, 1)',
                  },
                  {
                    offset: 0.5,
                    color: 'rgba(254, 173, 84, 1)',
                  },
                  {
                    offset: 0,
                    color: 'rgba(229, 86, 63, 1)',
                  },
                ],
              };
            } else if ((params.value < 5 || params.value === 5) && params.value > 1) {
              color1 = {
                type: 'linear',
                x: 1,
                x2: 0,
                y: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 1,
                    color: 'rgba(48, 201, 137, 1)',
                  },
                  {
                    offset: 0,
                    color: 'rgba(254, 173, 84, 1)',
                  },
                ],
              };
            } else if (params.value === 1) {
              color1 = {
                type: 'linear',
                x: 1,
                x2: 0,
                y: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 1,
                    color: 'rgba(48, 201, 137, 1)',
                  },
                  {
                    offset: 0,
                    color: 'rgba(48, 201, 137, 1)',
                  },
                ],
              };
            }
            return color1;
          },
          borderRadius: [30, 30, 30, 30], //圆角大小
        },
      },
      data: [data1],
    },
  ],
};//底部流量图


onMounted(() => {
  //初始化echarts实例
  let mycharts = echarts.init(charts.value);
  let mycharts2 = echarts.init(charts2.value);
  //设置配置项
  mycharts.setOption(option)
  mycharts2.setOption(option2)
})

</script>

<style scoped lang="scss">

.bottom {
  margin-top: -10px;
  height: 40px;
  line-height: 40px;
  color: white;
  text-align: center;
  font-size: 25px;
}

.echarts-container {
  height: 70%;
}

.echarts-container2 {
  margin-top: 5px;
  height: 15%;
}
</style>